<!--
 * @Author: Lzx
 * @LastEditors: Lzx
 * @Date: 2021-07-09 17:30:56
 * @LastEditTime: 2022-04-15 13:03:09
 * @FilePath: /web-vue/src/views/SysOwnCenter/components/ModifyPassword.vue
 * @Description: 密码修改（个人账号）
-->
<template>
  <div>
    <el-form
      :model="userForm"
      :rules="rules"
      status-icon
      ref="userForm"
      label-width="100px"
      style="width:50%"
    >
      <el-form-item label="旧密码：" prop="oldPassword" size="mini">
        <el-input
          v-model="userForm.oldPassword"
          type="password"
          autocomplete="off"
          placeholder="请输入旧密码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="newPassword" size="mini">
        <el-input
          v-model="userForm.newPassword"
          type="password"
          autocomplete="off"
          placeholder="请输入新密码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="checkPass" size="mini">
        <el-input
          v-model="userForm.checkPass"
          type="password"
          autocomplete="off"
          placeholder="请再次输入新密码"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "modifyPassword",

  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.userForm.checkPass !== "") {
          this.$refs.userForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      userForm: {
        oldPassword: "",
        newPassword: "",
        checkPass: "",
      },

      // 表单校验规则
      rules: {
        oldPassword: [
          {
            required: true,
            message: "旧密码不能为空！",
            trigger: "blur",
          },
        ],
        newPassword: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },

  methods: {
    // 数据提交接口处理
    modifyPassApi() {
      this.$refs["userForm"].validate((valid) => {
        // 表单校验通过
        if (valid) {
          const loading = this.$loading({
            target: document.querySelector(".modify-pass-dialog"),
            lock: true,
            text: "正在保存，请耐心等待！",
          });

          // 请求参数
          let param = Object.assign({}, this.userForm);
          this.$delete(param, "checkPass");

          // 请求处理
          this.$api
            .modifyOwnPassword(param)
            .then((res) => {
              loading.close();

              let { status, message, data } = res.data; // 响应数据
              if (status == 200) {
                // 通知父组件：数据提交后置处理
                this.$emit("afterSubmit");
              } else {
                this.$alert(`更新失败！${message}`, "密码修改", {
                  type: "error",
                  confirmButtonText: "确定",
                  callback: (action) => {},
                });
              }
            })
            .catch(function(err) {
              loading.close();
              console.log("【密码修改】接口发生错误: " + err);
            });
        }
      });
    },

    // 清除表单校验
    clearFormValid() {
      this.$refs["userForm"].clearValidate();
    },
  },
};
</script>

<style lang="scss"></style>
